<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>helloVue2</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="./js/flexible.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.boxHead {
			position: fixed;
			width: 10rem;
			height: 1.373333rem;
			background-color: #e54847;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.boxHeadMind {
			position: fixed;
			display: flex;
			top: 1.373333rem;
			width: 10rem;
			height: 1.6rem;
			justify-content: space-around;
			align-items: center;
			border-bottom: 1px solid #e8e8e8;
		}

		.boxHeadBottom {
			position: fixed;
			top: 2.973333rem;
			width: 10rem;
			height: 1.173333rem;
			border-bottom: 1px solid #e8e8e8;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.boxHeadL {
			width: 7.2rem;
			color: white;
			font-size: .48rem;
			text-align: center;
		}

		.boxHeadR {
			width: 1.4rem;
		}

		.boxHeadR img {
			margin-left: .32rem;
			width: .453333rem;
			height: .48rem;
		}

		.boxHeadMindL {
			flex: 0 1 20%;
		}

		.boxHeadMindL img {
			width: 2.506667rem;
			height: 1.04rem;
		}

		.boxHeadMindR {
			margin-top: -0.133333rem;
		}

		.boxHeadMindR :first-child {
			color: #666;
			font-size: 14px;
		}

		.boxHeadMindR span {
			margin-right: .026667rem;
			display: inline-block;
			width: .013333rem;
			height: .346667rem;
			background-color: rgba(0, 0, 0, .5);
		}

		.boxHeadMindR :nth-child(3) {
			font-size: 16px;
			font-weight: 700;
			color: #b37e7e;
		}

		.boxHeadBottomL {
			width: 62px;
			height: 21px;
			text-align: center;
			flex: 0 1 auto;
		}

		.boxHeadBottomL>span {
			float: right;
			font-size: 16px;
			color: #666;
		}

		.i {
			width: 0;
			height: 0;
			border: 4px solid #b0b0b0;
			border-left-color: transparent;
			border-right-color: transparent;
			border-bottom-color: transparent;
			display: inline-block;
			margin-left: 4px;
			margin-top: 5px;
		}

		.boxHeadBottomR {
			width: 20px;
			height: 20px;
			background: url("./img/maoyansousuo.png") no-repeat;
			background-size: 100% 100%;
			vertical-align: middle;
			flex: 0 1 auto;
		}

		.boxHeadBottomM {
			display: flex;
			justify-content: space-around;
			font-size: 15px;
			color: #666;
			flex: 1 0 auto;
		}

		.boxHeadBottomM>a {
			position: relative;
		}

		.boxHeadBottomM>a:hover {
			font-size: 17px;
			color: black;
			font-weight: 700;
		}

		.boxHeadBottomM>a:hover::after {
			content: '';
			position: absolute;
			bottom: -12px;
			left: 25%;
			width: 50%;
			height: 3px;
			/* margin-left: -25%; */
			background: #bc2012;
		}



		/* .boxHeadBottomM:first-child::after{
			content: '';
			position: absolute;
			bottom: 0; left: 25%;
			width: 50%; height: 3px; 
			background: #bc2012;
		}
			
		.boxHeadBottomM a:hover::after{
			content: '';
			position: absolute;
			bottom: 0; left: 25%;
			width: 50%; height: 3px; 
			background: #bc2012;
		} */

		/* .divMovieBig{
			position: fixed;
			top: 4.143333rem;
			height: 100%;
		} */

		.divMovieBig {
			position: fixed;
			top: 4.143333rem;
			height: 100%;
		}

		.divMovie {
			position: fixed;
			height: 380px;
			overflow: scroll;
		}

		.movieT {
			/* position: absolute; */
			/* z-index: -1;
			top: 4.143333rem; */
			width: 10rem;
			height: 5.333333rem;
			display: flex;
			font-size: 14px;
			/* 横向居中 */
			/* 纵向居中 */
			align-items: center;
			flex-wrap: wrap;
		}

		.movieTImg {
			width: 9.84rem;
			height: 4rem;
			overflow: scroll;
		}

		.img {
			display: flex;
			width: 800px;
			justify-content: space-around;
		}

		*::-webkit-scrollbar {
			width: 0 !important
		}

		.img img {
			width: 2.266667rem;
			height: 3.066667rem;
		}

		#movieD {
			width: 10rem;
			height: 8.026667rem;
		}

		#app {
			position: fixed;
			display: none;
		}

		.movieDS {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 10px;

		}

		.movieDSL {
			width: 64px;
			height: 90px;
			flex: 0 1 15%;
		}

		.movieDSL img {
			width: 64px;
			height: 90px;
		}

		.movieDSM {
			display: flex;
			flex-wrap: wrap;
			font-size: 14px;
			flex: 0 1 60%;
		}

		.movieDSM span {
			width: 220px;
		}

		.movieDSR {
			width: 47px;
			height: 27px;
			background-color: #f03d37;
			border-radius: 20px;
			display: flex;
			flex: 0 1 15%;
			justify-content: center;
			align-items: center;
		}

		.movieDSR span {
			display: inline-block;
			font-size: 14px;
			color: white;
			text-align: center;
		}

		.star{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space:nowrap;
		}
		.bluepre{
			background-color: blue;
		}
	</style>
</head>

<body>
	<div class="boxFather">
		<div class="boxHead">
			<div class="boxHeadL">
				猫眼电影
			</div>
			<div class="boxHeadR">
				<img src="./img/gang2.png">
			</div>
		</div>
		<div class="boxHeadMind">
			<div class="boxHeadMindL">
				<img src="./img/maoyanlog.png">
			</div>
			<div class="boxHeadMindR">
				<a>发现最新最热电影</a>
				<span></span>
				<a>打开APP></a>
			</div>
		</div>
		<div class="boxHeadBottom">
			<div class="boxHeadBottomL">
				<span>长沙<span class="i"></span></span>
			</div>
			<div class="boxHeadBottomM">
				<a id="reyingA">热映</a>
				<a id="yingyuanA">影院</a>
				<a>待映</a>
				<a>经典电影</a>
			</div>
			<div class="boxHeadBottomR">

			</div>
		</div>
		<div class="divMovieBig">
			<div class="divMovie">
				<div class="movieT">
					<p>最受好评电影</p>
					<div class="movieTImg">
						<div class="img">
							<img src="./img/movie.jpg">
							<img src="./img/movie.jpg">
							<img src="./img/movie.jpg">
							<img src="./img/movie.jpg">
							<img src="./img/movie.jpg">
							<img src="./img/movie.jpg">
							<img src="./img/movie.jpg">
							<img src="./img/movie.jpg">
						</div>
					</div>
				</div>
				<div id="movieD">
					<div class="movieDS" v-for="(item,index) in myjson">
						<div class="movieDSL">
							<img :src="item.img">
						</div>
						<div class="movieDSM">
							<span>{{item.nm}}<span v-if="item.version == 'v2d imax'"> v2d imax</span></span>
							<span>观众评{{item.sc}}</span>
							<span class="star">主演{{item.star}}</span>
							<span>{{item.showInfo}}</span>
						</div>
						<div :class="{movieDSR:'true',bluepre:item.preShow}">
							<span></span><span v-if="item.preShow === false">购票</span><span v-else>预购</span></span>
						</div>
					</div> 	
				</div>
			</div>
		</div>
	</div>
	<script src="./js/vue.js"></script>
	<script>
		let app = new Vue({
			el: "#movieD",
			data: {
				myjson: [
					{
						"id": 1250676,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/movie/94bfc893acb9c586f6270eb8ef5096d53124190.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "了不起的老爸",
						"preShow": false,
						"sc": 9.3,
						"globalReleased": true,
						"wish": 181876,
						"star": "王砚辉,张宥浩,龚蓓苾",
						"rt": "2021-06-18",
						"showInfo": "今天120家影院放映913场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1319075,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/movie/2b709fe7f7c2c9b21c6d37b79e41eb5f1849773.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "守岛人",
						"preShow": false,
						"sc": 9.4,
						"globalReleased": true,
						"wish": 13057,
						"star": "刘烨,宫哲,侯勇",
						"rt": "2021-06-18",
						"showInfo": "今天87家影院放映316场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1278598,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/movie/cc08f286aea37c3355fb4bb2441aef3f3457731.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "你好世界",
						"preShow": false,
						"sc": 8.9,
						"globalReleased": true,
						"wish": 199467,
						"star": "北村匠海,松坂桃李,滨边美波",
						"rt": "2021-06-11",
						"showInfo": "今天104家影院放映387场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1360592,
						"haspromotionTag": false,
						"img": "https://p1.meituan.net/movie/17ffdf0c99a3c5ea54552b4e2149aa634124443.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "当男人恋爱时",
						"preShow": false,
						"sc": 8.4,
						"globalReleased": true,
						"wish": 56474,
						"star": "邱泽,许玮甯,蔡振南",
						"rt": "2021-06-11",
						"showInfo": "今天118家影院放映727场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 644174,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/moviemachine/8d4fd5413b933fdd34e693b7fff5dca7241741.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "黑白魔女库伊拉",
						"preShow": false,
						"sc": 9.2,
						"globalReleased": true,
						"wish": 39798,
						"star": "艾玛·斯通,艾玛·汤普森,乔尔·弗莱",
						"rt": "2021-06-06",
						"showInfo": "今天100家影院放映345场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1302235,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/movie/487652d6aa8794be39aa956fd77233551990319.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "超越",
						"preShow": false,
						"sc": 8.1,
						"globalReleased": true,
						"wish": 237013,
						"star": "郑恺,李昀锐,曹炳琨",
						"rt": "2021-06-12",
						"showInfo": "今天111家影院放映358场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1198179,
						"haspromotionTag": false,
						"img": "https://p1.meituan.net/movie/6a0b995daf79a1112aab8fb441f655ff3419929.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "阳光姐妹淘",
						"preShow": false,
						"sc": 8.8,
						"globalReleased": true,
						"wish": 177876,
						"star": "殷桃,曾黎,张歆艺",
						"rt": "2021-06-11",
						"showInfo": "今天87家影院放映231场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1297927,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/movie/348c7eec302fb8006ada81c9d6bfa8dd304463.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "困在时间里的父亲",
						"preShow": false,
						"sc": 9.1,
						"globalReleased": true,
						"wish": 28385,
						"star": "安东尼·霍普金斯,奥莉薇娅·柯尔曼,伊莫珍·波茨",
						"rt": "2021-06-18",
						"showInfo": "今天48家影院放映163场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1242151,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/moviemachine/4f5ecc2cb68afdfce773914c126cb2dd146582.jpg@1l_1e_1c_128w_180h",
						"version": "v2d imax",
						"nm": "寂静之地2",
						"preShow": false,
						"sc": 7.7,
						"globalReleased": true,
						"wish": 59625,
						"star": "艾米莉·布朗特,希里安·墨菲,米利森特·西蒙兹",
						"rt": "2021-05-28",
						"showInfo": "今天77家影院放映202场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1225503,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/movie/49b453507a60d99a9b9d42755950029994987.jpg@1l_1e_1c_128w_180h",
						"version": "",
						"nm": "比得兔2：逃跑计划",
						"preShow": false,
						"sc": 9.1,
						"globalReleased": true,
						"wish": 53317,
						"star": "郭麒麟,詹姆斯·柯登,萝丝·拜恩",
						"rt": "2021-06-11",
						"showInfo": "今天102家影院放映329场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1298367,
						"haspromotionTag": false,
						"img": "https://p0.meituan.net/movie/3ad18f011110130e927d50046fde86f71038961.jpg@1l_1e_1c_128w_180h",
						"version": "v2d imax",
						"nm": "悬崖之上",
						"preShow": false,
						"sc": 9.1,
						"globalReleased": true,
						"wish": 143137,
						"star": "张译,于和伟,秦海璐",
						"rt": "2021-04-30",
						"showInfo": "今天57家影院放映144场",
						"showst": 3,
						"wishst": 0
					},
					{
						"id": 1336183,
						"haspromotionTag": false,
						"img": "https://p1.meituan.net/movie/63cb3dbbaff624b236b2e22b2ee59cff1553093.jpg@1l_1e_1c_128w_180h",
						"version": "v2d imax",
						"nm": "1921",
						"preShow": true,
						"sc": 0,
						"globalReleased": false,
						"wish": 247792,
						"star": "黄轩,倪妮,王仁君",
						"rt": "2021-07-01",
						"showInfo": "2021-07-01 下周四上映",
						"showst": 4,
						"wishst": 0
					}
				]
			}
		})
	</script>
</body>

</html>